CSS Flexbox Meistriškumas: Pažangus lygiavimas ir paskirstymas

Jau keletą metų CSS Flexbox yra modernaus tinklalapių maketavimo pagrindas. Dauguma programuotojų yra įpratę naudoti display: flex elementams išdėstyti eilutėje arba sukurti paprastus centruotus komponentus. Tačiau tikras Flexbox įvaldymas slypi suprantant jo subtilesnes savybes, skirtas pažangiam lygiavimui ir dinaminiam paskirstymui. Kai peržengiate justify-content: center ir align-items: center pagrindus, atveriate galią kurti sudėtingus, adaptyvius ir iš prigimties lanksčius maketus stebėtinai lengvai.

Šis vadovas skirtas programuotojams, kurie jau žino pagrindus, bet nori pagilinti savo supratimą. Nagrinėsime savybes, kurios valdo kelių eilučių lygiavimą, sudėtingą logiką, slypinčią už „flex“ elementų didėjimo ir mažėjimo, ir kelis galingus šablonus, kurie sprendžia įprastus maketavimo iššūkius. Pasiruoškite iš paprasto vartotojo tapti pasitikinčiu Flexbox architektu.

Pagrindai: greitas pagrindinės ir skersinės ašių priminimas

Prieš gilinantis į pažangias temas, būtina tvirtai suprasti dvi ašis, kurios valdo kiekvieną „flex“ konteinerį. Visos Flexbox lygiavimo ir paskirstymo savybės veikia pagal vieną iš šių dviejų ašių.

• Pagrindinė ašis: Tai yra pirminė ašis, išilgai kurios išdėstomi „flex“ elementai. Jos kryptį apibrėžia flex-direction savybė.
• Skersinė ašis: Ši ašis visada yra statmena pagrindinei ašiai.

Svarbiausia yra suprasti, kad šios ašys nėra statinės. Jos keičia savo orientaciją priklausomai nuo jūsų flex-direction reikšmės:

• flex-direction: row (numatytoji): Pagrindinė ašis yra horizontali (iš kairės į dešinę), o skersinė ašis yra vertikali (iš viršaus į apačią).
• flex-direction: column: Pagrindinė ašis tampa vertikali (iš viršaus į apačią), o skersinė ašis tampa horizontali (iš kairės į dešinę).
• flex-direction: row-reverse: Pagrindinė ašis yra horizontali, bet eina iš dešinės į kairę.
• flex-direction: column-reverse: Pagrindinė ašis yra vertikali, bet eina iš apačios į viršų.

Šio pagrindinio principo pamiršimas yra dažniausia Flexbox painiavos priežastis. Prieš taikydami lygiavimo savybę, visada paklauskite savęs: „Kuria kryptimi nukreipta mano pagrindinė ašis?“

Pagrindinės ašies paskirstymo įvaldymas su justify-content

Savybė justify-content kontroliuoja, kaip erdvė paskirstoma tarp ir aplink „flex“ elementus išilgai pagrindinės ašies. Nors flex-start, flex-end ir center yra paprastos, tikroji galia slypi erdvės paskirstymo reikšmėse.

Išsamesnis žvilgsnis į erdvės paskirstymą

Išsiaiškinkime subtilius, bet esminius skirtumus tarp space-between, space-around ir space-evenly.

• justify-content: space-between;

  Ši reikšmė tolygiai paskirsto elementus pagrindinėje ašyje. Pirmas elementas nustumiamas į patį konteinerio pradžią, o paskutinis – į patį galą. Visa likusi erdvė padalijama po lygiai tarp elementų. Išorinėse kraštinėse tarpo nėra.

  Naudojimo atvejis: Puikiai tinka navigacijos juostoms, kur norite, kad logotipas būtų kairėje, o nuorodos – dešinėje, su vienodais tarpais tarp nuorodų.

• justify-content: space-around;

  Ši reikšmė paskirsto elementus su vienoda erdve aplink kiekvieną elementą. Įsivaizduokite, kad kiekvienas elementas turi erdvės „burbulą“ iš kairės ir dešinės pusės. Kai gretimų elementų „burbulai“ susiliečia, tarpas tarp jų atrodo dvigubai didesnis nei tarpas ties konteinerio kraštais. Tiksliau, tarpas išorinėse kraštinėse yra perpus mažesnis už tarpą tarp elementų.

  Naudojimo atvejis: Naudinga kortelių maketams ar galerijoms, kur norite, kad elementai turėtų šiek tiek erdvės nuo konteinerio kraštų, bet nebūtų prigludę prie jų.

• justify-content: space-evenly;

  Tai intuityviausia iš šių trijų reikšmių. Ji užtikrina, kad tarpas tarp bet kurių dviejų elementų yra lygiai toks pat kaip tarpas tarp pirmo/paskutinio elemento ir konteinerio krašto. Kiekvienas tarpas yra identiškas.

  Naudojimo atvejis: Idealiai tinka, kai reikia visiškai subalansuoto, simetriško maketo. Dažnai būtent tai dizaineriai netiesiogiai ir nori pasakyti, prašydami „vienodo tarpo“.

Skersinės ašies lygiavimo įvaldymas su align-items ir align-self

Kol justify-content tvarko pagrindinę ašį, align-items valdo numatytąjį elementų lygiavimą išilgai skersinės ašies vienoje eilutėje.

align-items reikšmių supratimas

• align-items: stretch; (numatytoji): Štai kodėl jūsų „flex“ elementai dažnai atrodo užpildantys konteinerio aukštį, net jei to neprašėte. Elementai išsitemps, kad užpildytų konteinerio dydį skersinėje ašyje (pvz., aukštį flex-direction: row konteineryje).
• align-items: flex-start;: Elementai suglaudžiami skersinės ašies pradžioje.
• align-items: flex-end;: Elementai suglaudžiami skersinės ašies pabaigoje.
• align-items: center;: Elementai centruojami išilgai skersinės ašies.
• align-items: baseline;: Tai galinga ir nepakankamai naudojama reikšmė. Elementai lygiuojami taip, kad jų teksto bazinės linijos sutaptų. Tai neįtikėtinai naudinga, kai turite elementų su skirtingais šrifto dydžiais (pvz., pagrindinė antraštė šalia paantraštės) ir norite, kad jie būtų lygiuojami pagal tekstą, o ne tik pagal savo rėmelių ribas.

Perrašymas su align-self

O kas, jei norite, kad vienas konkretus elementas elgtųsi kitaip nei kiti? Čia į pagalbą ateina align-self. Pritaikyta individualiam „flex“ elementui, ji perrašo konteinerio align-items savybę tik tam vienam elementui. Ji priima visas tas pačias reikšmes kaip ir align-items (plius `auto`, kuri grąžina konteinerio reikšmę).

Pavyzdys: Įsivaizduokite kortelių eilutę, kurios visos centruotos su align-items: center. Galėtumėte išskirti vieną „išskirtinę“ kortelę, pritaikydami jai align-self: stretch;, padarydami ją aukštesnę už kitas.

Neapdainuotas herojus: pažangus paskirstymas su align-content

Tai, ko gero, labiausiai nesuprantama Flexbox savybė, o jos įvaldymas yra pažangaus lygio ženklas. Dažnai painiavos kelia jos panašumas į align-items.

Štai esminė taisyklė: align-content neturi JOKIO POVEIKIO, kai visi jūsų „flex“ elementai yra vienoje eilutėje. Ji veikia tik tada, kai turite kelių eilučių „flex“ konteinerį (t. y. nustatėte flex-wrap: wrap; ir elementai iš tikrųjų persikėlė į naujas eilutes).

Pagalvokite apie tai taip:

• align-items lygiavo elementus jų eilutės viduje.
• align-content lygiavo pačias eilutes konteinerio viduje. Ji kontroliuoja erdvės paskirstymą skersinėje ašyje tarp elementų eilučių.

Iš esmės ji veikia kaip justify-content, bet skersinei ašiai. Jos reikšmės yra beveik identiškos:

• align-content: flex-start; (numatytoji): Visos eilutės suglaudžiamos konteinerio pradžioje.
• align-content: flex-end;: Visos eilutės suglaudžiamos pabaigoje.
• align-content: center;: Visos eilutės suglaudžiamos centre.
• align-content: space-between;: Pirmoji eilutė yra pradžioje, paskutinė – pabaigoje, o tarpas tolygiai paskirstomas tarp eilučių.
• align-content: space-around;: Vienoda erdvė paliekama aplink kiekvieną eilutę.
• align-content: space-evenly;: Tarpas tarp kiekvienos eilutės yra identiškas.
• align-content: stretch;: Eilutės išsitempia, kad užimtų likusią erdvę.

Naudojimo atvejis: Įsivaizduokite nuotraukų galeriją, kurioje elementai persikelia į kitą eilutę. Jei konteineris turi fiksuotą aukštį, gali likti papildomos vertikalios erdvės. Pagal numatytuosius nustatymus ši erdvė atsiranda apačioje. Naudodami align-content: space-between; arba align-content: center;, galite kontroliuoti viso nuotraukų tinklelio vertikalų paskirstymą, sukurdami daug profesionalesnį maketą.

Dinaminis dydžio keitimas ir paskirstymas: flex trumpinys

Statiniai maketai yra reti. Tikroji Flexbox galia kyla iš jo gebėjimo tvarkyti dinaminį turinį ir prieinamą erdvę. Tai valdoma trimis savybėmis, dažnai nustatomomis per flex trumpinį: flex-grow, flex-shrink ir flex-basis.

1. flex-basis: pradinis taškas

Prieš prasidedant bet kokiam didėjimui ar mažėjimui, Flexbox reikia pradinio dydžio kiekvienam elementui. Tai yra flex-basis darbas. Ji apibrėžia numatytąjį elemento dydį išilgai pagrindinės ašies.

• Jei nustatytas konkretus ilgis (pvz., 200px arba 10rem), tai tampa pradiniu elemento dydžiu.
• Jei nustatyta auto, ieškoma elemento `width` arba `height` savybės. Jei tokios nėra, dydis nustatomas pagal elemento turinį.
• Jei nustatyta 0, elementas neturi pradinio dydžio, o jo galutinis dydis nustatomas tik pagal jo flex-grow proporciją.

Geriausia praktika: „Flex“ kontekste dažnai geriau naudoti flex-basis vietoj `width`, nes tai aiškiau apibrėžia elemento dydį pagrindinės ašies kontekste.

2. flex-grow: teigiamos erdvės naudojimas

Kai „flex“ konteineryje yra papildomos erdvės išilgai pagrindinės ašies, flex-grow nustato, kaip ta erdvė paskirstoma. Tai yra proporcija be matavimo vienetų.

• Numatytoji reikšmė yra 0, reiškianti, kad elementai nedidės, kad užpildytų papildomą erdvę.
• Jei visi elementai turi flex-grow: 1, papildoma erdvė paskirstoma tarp jų po lygiai.
• Jei vienas elementas turi flex-grow: 2, o kitas – flex-grow: 1, pirmasis elementas gaus dvigubai daugiau papildomos erdvės nei antrasis.

3. flex-shrink: neigiamos erdvės (perpildymo) valdymas

Tai yra flex-grow atitikmuo. Kai konteineryje nepakanka vietos visiems elementams pagal jų flex-basis, jie turi susitraukti. flex-shrink kontroliuoja, kiek jie susitraukia.

• Numatytoji reikšmė yra 1, reiškianti, kad visi elementai susitraukia proporcingai, kad būtų išvengta perpildymo.
• Jei elementui nustatysite flex-shrink: 0, jis nesusitrauks. Jis išlaikys savo flex-basis dydį, galbūt sukeldamas konteinerio perpildymą. Tai naudinga elementams, tokiems kaip logotipai ar mygtukai, kurie niekada neturėtų būti suspausti.

flex trumpinys: viskas kartu

Savybė flex yra trumpinys savybėms flex-grow, flex-shrink ir flex-basis, būtent šia tvarka.

• flex: 0 1 auto; (numatytoji): Elementas negali didėti, gali mažėti, o jo pagrindas nustatomas pagal jo plotį/aukštį ar turinį.
• flex: 1; (trumpinys flex: 1 1 0;): Labai paplitusi reikšmė. Elementas gali didėti ir mažėti, o jo pradinis dydis yra 0. Tai efektyviai priverčia elementus dalintis erdve tik pagal jų flex-grow proporciją.
• flex: auto; (trumpinys flex: 1 1 auto;): Elementas gali didėti ir mažėti, o jo pagrindas nustatomas pagal jo turinį. Tai leidžia elementams turėti skirtingus dydžius pagal turinį, bet vis tiek lanksčiai absorbuoti papildomą erdvę.
• flex: none; (trumpinys flex: 0 0 auto;): Elementas yra visiškai nelankstus. Jis negali nei didėti, nei mažėti.

Praktiniai naudojimo atvejai ir pažangūs scenarijai

1 Scenarijus: „prilimpanti“ poraštė („Šventojo Gralio“ maketas)

Klasikinė tinklalapių dizaino problema: kaip padaryti, kad poraštė priliptų prie puslapio apačios, net kai turinys trumpas, bet natūraliai nusistumtų žemyn, kai turinys ilgas.

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ekrano srities aukštis */
}

.main-content {
  flex-grow: 1; /* arba flex: 1; */
}

Pavertę pagrindinį puslapio konteinerį stulpeline „flexbox“ sistema ir nustatę pagrindinio turinio sričiai flex-grow: 1, mes nurodome jai užimti visą prieinamą vertikalią erdvę, nustumiant poraštę į ekrano srities apačią.

2 Scenarijus: automatinės paraštės grupių atskyrimui

Kaip sukurti navigacijos juostą su logotipu kairėje pusėje ir nuorodų grupe dešinėje? Nors justify-content: space-between veikia, jei logotipas yra vienas „flex“ elementas, o kas, jei dešinėje turite kelis elementus?

Sprendimas yra automatinių paraščių magija Flexbox sistemoje.

.navbar {
  display: flex;
}

.logo {
  /* Specialių savybių nereikia */
}

.nav-links {
  margin-left: auto;
}

„Flex“ konteineryje automatinė paraštė užims visą prieinamą erdvę ta kryptimi, kuria ji pritaikyta. Nustačius margin-left: auto navigacijos nuorodų grupei, sukuriama lanksti, tuščia erdvė tarp logotipo ir nuorodų, nustumiant nuorodas iki pat dešiniojo krašto.

3 Scenarijus: medijos objektas

Įprastas vartotojo sąsajos šablonas yra vaizdas ar piktograma vienoje pusėje ir aprašomasis tekstas kitoje. Tekstas turėtų užimti visą likusią erdvę ir gražiai persikelti į kitą eilutę.

.media-object {
  display: flex;
  align-items: flex-start; /* Lygiavo vaizdą ir tekstą viršuje */
}

.media-image {
  margin-right: 1rem;
  flex-shrink: 0; /* Neleidžia vaizdui susispausti */
}

.media-body {
  flex-grow: 1; /* Užima visą likusią horizontalią erdvę */
}

Čia flex-grow: 1 teksto konteineriui yra esminis dalykas. Tai užtikrina, kad nepriklausomai nuo vaizdo pločio, teksto turinys išsiplės, kad užpildytų likusį prieinamą plotį konteineryje.

Išvada: ne tik lygiavimas, bet ir sąmoningas maketavimas

Įvaldyti Flexbox reiškia ne tik centruoti elementus. Tai reiškia suprasti ašių sąveiką, erdvės paskirstymo logiką ir elementų dydžio lankstumą. Tvirtai įsisavinę align-content kelių eilučių maketams, flex trumpinį dinaminiam dydžio keitimui ir galingus šablonus, tokius kaip automatinės paraštės, galite kurti maketus, kurie yra ne tik vizualiai patrauklūs, bet ir tvirti, adaptyvūs bei semantiškai švarūs.

Kitą kartą, susidūrę su sudėtingu maketavimo iššūkiu, atsispirkite pagundai griebtis „float“ ar sudėtingų pozicionavimo sprendimų. Vietoj to, paklauskite savęs: ar tai galima išspręsti sąmoningai paskirstant erdvę? Atsakymą dažniausiai rasite pažangiose CSS Flexbox galimybėse.